<!-- 配表选择对话框 -->
<template>
  <ElDialog title="选择配表" width="500px">
    <div class="dialog-content">
      <SimpleList
        :list="configTableStore.tables"
        @click="handleTableClick"
      />
    </div>
    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </template>
  </ElDialog>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, ref, watch } from 'vue';
import { ElDialog } from 'element-plus';
import SimpleList from '@/components/utils/SimpleList.vue';
import { useConfigTableStore } from '@/stores/config/configTableStore';
let configTableStore = useConfigTableStore();
let selectedTableId:number|null = null

// 定义emits
const emit = defineEmits<{
  (event: 'confirm', selectedTableId: number | null): void;
  (event: 'cancel'): void;
}>();

// 处理表格点击事件
const handleTableClick = (id: number) => {
  selectedTableId = id;
};

// 确认选择
const confirm = () => {
  if (selectedTableId === null) {
    return;
  }
  emit('confirm', selectedTableId);
};

// 取消选择
const cancel = () => {
  emit('cancel');
};
</script>

<style scoped>
.dialog-content {
  max-height: 400px;
  overflow-y: auto;
  padding: 10px;
}
</style>